<template>
	<view>
		<view class="top">
			<view class="msg">
				<view class="p">
					<text>发货员</text>
					：李宏伟
				</view>
				<view class="p">
					<text>部门</text>
					：发货部
				</view>
				<view class="p">
					<text>星级</text>
					：
					<image src="/static/img/star.png"></image>
					<image src="/static/img/star.png"></image>
					<image src="/static/img/star.png"></image>
				</view>
			</view>
			<image src="/static/img/shipmentsbg.png" class="bg" mode="widthFix"></image>
		</view>
		<view class="line">
			<view class="list2 list-l bgf1" @click="_router('./cancel')">
				<image src="/static/img/shipments1.png" />
				<view>取消订单</view>
			</view>
			<view class="list2 list-r bgf2" @click="_router('./shortage')">
				<image src="/static/img/shipments2.png" />
				<view>断货订单</view>
			</view>
		</view>
		<view class="line">
			<view class="list3 list-l">
				<view class="list1 bgf3"  @click="_router('./unfinished')">
					<image src="/static/img/shipments3.png" />
					<view>未发货订单</view>
				</view>
				<view class="list1 bgf4"   @click="_router('./finished')">
					<image src="/static/img/shipments4.png" />
					<view>已发货订单</view>
				</view>
			</view>
			<view class="list3 list-r  bgf5" @click="_router('./alterdetails')">
				<image src="/static/img/shipments5.png" />
				<view>发货</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {
		_router (router) {
			uni.navigateTo({
			    url: router
			});
		}
		
		
	}
};
</script>

<style lang="less" scoped>
.top {
	position: relative;
	font-size: 30rpx;
	line-height: 68rpx;
	.msg {
		position: absolute;
		left: 50%;
		top: 50%;
		z-index: 9;
		margin-top: -150rpx;
		margin-left: -140rpx;
		color: #fff;
		text {
			display: inline-block;
			width: 130rpx;
			text-align-last: justify;
		}
		image {
			width: 34rpx;
			height: 34rpx;
		}
	}
	.bg {
		width: 100%;
	}
}
.line {
	display: flex;
	width: 100%;
	margin-bottom: 37rpx;
	padding: 0 20rpx;
	box-sizing: border-box;
	text-align: center;
	.list-r {
		width: 100%;
		margin-left: 37rpx;
	}
	.list1 {
		height: 225rpx;
		border-radius: 5rpx;
		padding-top: 40rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		box-shadow: 5rpx 0px 20rpx #c5c5c5;
		view {
			padding-top: 10rpx;
		}
		image {
			width: 90rpx;
			height: 90rpx;
		}
	}
	.list2 {
		height: 260rpx;
		flex: 1;
		border-radius: 5rpx;
		padding-top: 40rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		box-shadow: 5rpx 0px 20rpx #c5c5c5;
		view {
			padding-top: 32rpx;
		}
		image {
			width: 90rpx;
			height: 90rpx;
		}
	}
	.list3 {
		flex: 1;
		height: 487rpx;
	}
	.list3 .list1:nth-child(1) {
		margin-bottom: 37rpx;
	}
	.list3.bgf5{
		border-radius: 5rpx;
		padding-top: 146rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		box-shadow: 0rpx 0px 20rpx #c5c5c5;
		image {
			width: 90rpx;
			height: 90rpx;
		}
		view {
			padding-top: 40rpx;
		}
	}
}
</style>
